<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">添加商家</h1>
                <el-steps :space="300" :active="active" center>
                    <el-step title="填写基本信息"></el-step>
                    <el-step title="填写营业信息"></el-step>
                    <el-step title="填写联系人"></el-step>
                </el-steps>
                <div v-if="active === 1">
                    <el-card class="box-card">
                        <el-form :inline="true" ref="org" :model="org" :rules="rules" label-width="120px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="上级商家">
                                        <el-select
                                                style="width: 217px"
                                                v-model="org.pid"
                                                filterable
                                                remote
                                                placeholder="请输入关键词"
                                                :remote-method="remoteMethod"
                                                :loading="loading">
                                            <el-option
                                                    v-for="item in orgList"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="名称" prop="name">
                                        <el-input v-model="org.name"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="地址" prop="city">
                                        <el-cascader
                                                v-model="org.city"
                                                v-loading="addressLoading"
                                                :options="addressList"
                                                @active-item-change="handleItemChange"
                                                :props="props"
                                        ></el-cascader>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="详细地址" prop="address">
                                        <el-input type="textarea" v-model="org.address" style="width: 300px"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="邮政编码" prop="zipCode">
                                        <el-input v-model="org.zipCode"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="传真号码" prop="fax">
                                        <el-input v-model="org.fax"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="联系人" prop="linkName">
                                        <el-input v-model="org.linkName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系电话" prop="linkTel">
                                        <el-input v-model="org.linkTel"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="电子邮箱" prop="email">
                                        <el-input v-model="org.email"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div style="text-align: center">
                            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
                        </div>
                    </el-card>
                </div>
                <div v-if="active === 2">
                    <el-card class="box-card">
                        <el-form :inline="true" ref="orgExtend" :rules="extendRules" :model="orgExtend" label-width="120px">
                            <el-row>
                                <!--<el-col :span="12">-->
                                    <!--<el-form-item label="企业性质">-->
                                        <!--<el-select v-model="orgExtend.character" placeholder="请选择">-->
                                            <!--<el-option-->
                                                    <!--v-for="item in natureList"-->
                                                    <!--:label="item.name"-->
                                                    <!--:value="item.value">-->
                                            <!--</el-option>-->
                                        <!--</el-select>-->
                                    <!--</el-form-item>-->
                                <!--</el-col>-->
                                <el-form-item label="创立时间">
                                    <el-date-picker
                                            v-model="orgExtend.establishTime"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="执照号码" prop="licenseCode">
                                    <el-input v-model="orgExtend.licenseCode"></el-input>
                                </el-form-item>
                                <el-form-item label="员工数">
                                    <el-input v-model="orgExtend.staffNumber"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-form-item label="经营范围" prop="businessScope">
                                <el-input type="textarea" :rows="3" v-model="orgExtend.businessScope" style="width: 500px"></el-input>
                            </el-form-item>
                            <el-row>
                                <el-form-item label="执照图片">
                                    <el-row>
                                        <img height="100" v-if="orgExtend.licensePicUrl !== ''" :src="qiniuUrl + orgExtend.licensePicUrl">
                                        <i class="el-icon-circle-close img-delete" v-if="orgExtend.licensePicUrl !== ''" @click="deleteImg">
                                        </i>
                                        <el-upload
                                                :before-upload="beforeUpload"
                                                style="display: inline-block"
                                                :show-file-list="false"
                                                action="/file/upload"
                                                :on-success="uploadSuccess">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload>
                                    </el-row>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </el-card>
                    <el-card class="box-card" style="margin-top: 10px">
                        <el-form :inline="true" ref="orgExtend1" :rules="extendRules" :model="orgExtend" label-width="120px">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="积分比例" prop="pointProportion">
                                        <el-row>
                                            <el-col :span="10">
                                                <el-input v-model.number="orgExtend.pointProportion"></el-input>
                                            </el-col>
                                            <el-col :span="1">
                                                <span style="margin-left: 10px">%</span>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px">
                        <el-button @click="previous">上一步</el-button>
                        <el-button type="primary"  @click="next">下一步</el-button>
                    </div>
                </div>
                <div v-if="active === 3">
                    <el-card class="box-card">
                        <div style="margin-bottom: 10px">
                            <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
                        </div>
                        <el-table
                                :data="orgLinkList"
                                border
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="type"
                                    :formatter="formatType"
                                    label="类型">
                            </el-table-column>
                            <el-table-column
                                    prop="tel"
                                    label="电话">
                            </el-table-column>
                            <el-table-column
                                    prop="qq"
                                    label="qq">
                            </el-table-column>
                            <el-table-column
                                    prop="email"
                                    label="电子邮箱">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作"
                                    inline-template>
                                <div style="margin-left: -10px">
                                    <el-button size="small" type="primary" class="el-icon-delete" @click.native.prevent="deleteLink($index)"></el-button>
                                </div>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px">
                        <el-button @click="previous">上一步</el-button>
                        <el-button type="primary" @click.native="saveOrg">保存</el-button>
                    </div>
                </div>
                <el-dialog title="添加联系人" v-model="dialogFormVisible" size="tiny">
                    <el-form :model="contactForm" label-width="80px" :rules="addRules" ref="contactForm">
                        <el-form-item label="类型" prop="type">
                            <el-select v-model="contactForm.type" placeholder="请选择">
                                <el-option
                                        v-for="item in linkTypeList"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="contactForm.name" style="width: 217px"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="tel">
                            <el-input v-model="contactForm.tel" style="width: 217px"></el-input>
                        </el-form-item>
                        <el-form-item label="qq">
                            <el-input v-model="contactForm.qq" style="width: 217px"></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱">
                            <el-input v-model="contactForm.email" style="width: 217px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="saveLink">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                extendRules: {
                    licenseCode: [
                        {required: true, message: "执照号码不能为空"}
                    ],
                    pointProportion: [
                        {required: true, message: "积分比例不能为空"},
                        {type: "number", message: '积分比例必须为数字'}
                    ]
                },
                rules: {
                    name: [
                        {required: true, message: "商家名称不能为空"}
                    ],
                    city: [
                        {required: true, message: "请选择地址"}
                    ],
                    address: [
                        {required: true, message: "详细地址不能为空"}
                    ],
                    linkName: [
                        {required: true, message: "联系人不能为空"}
                    ],
                    linkTel: [
                        {required: true, message: "联系电话不能为空"},
                        {type: "string", pattern: /^1[34578]\d{9}$/, message: '请输入合法的手机号码'}
                    ],
                    zipCode: [
                        {type: "string", pattern: /^[1-9]\d{5}(?!\d)$/, message: '请输入合法的邮编'}
                    ],
                    fax: [
                        {type: "string", pattern: /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/, message: '请输入合法的传真号码'}
                    ],
                    email: [
                        {type: "string", pattern: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, message: '请输入合法的邮箱'}
                    ]
                },
                addRules: {
                    type: [
                        {required: true, message: "请选择类型"}
                    ],
                    name: [
                        {required: true, message: "姓名不能为空"}
                    ],
                    tel: [
                        {required: true, message: "电话不能为空"}
                    ]
                },
                active: 1,
                addressList: [],
                qiniuUrl: list.qiniuUrl,
                props: {
                    value: 'value',
                    label: 'label',
                    children: 'children'
                },
                orgList: [],
                org: {
                    pid: '',
                    name: '',
                    city: [],
                    address: '',
                    zipCode: '',
                    fax: '',
                    email: '',
                    linkName: '',
                    linkTel: ''
                },
                addressLoading: false,
                orgExtend: {
                    character: '',
                    establishTime: '',
                    licenseCode: '',
                    businessScope: '',
                    staffNumber: '',
                    licensePicUrl: ''
                },
                orgLinkList: [],
                loading: false,
                contactForm: {
                    type: '',
                    name: '',
                    qq: '',
                    tel: '',
                    email: ''
                },
                dialogFormVisible: false,
                natureList: [],
                linkTypeList: [],
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu
            }
        },
        mounted: function () {
            this.getAddress(0, "province");
//            this.getCharacter();
            this.getOrgLink();
        },
        methods: {
            next () {
                let that = this;
                let isValid1 = true;
                let isValid2 = true;
                let isValid3 = true;
                if (this.active === 1) {
                    this.$refs.org.validate(function (valid) {
                        if (!valid) {
                            isValid1 = false;
                            that.$message.error('请完善基本信息');
                        }
                    })
                }
                if (this.active === 2) {
                    this.$refs.orgExtend.validate(function (valid) {
                        if (!valid) {
                            isValid2 = false;
                            that.$message.error('请完善营业信息');
                        }
                    })
                    this.$refs.orgExtend1.validate(function (valid) {
                        if (!valid) {
                            isValid3 = false;
                            that.$message.error('请完善营业信息');
                        }
                    })
                }
                if (isValid1 && isValid2 && isValid3) {
                    if (this.active++ > 2) this.active = 1;
                }
            },
            deleteImg () {
                this.orgExtend.licensePicUrl = "";
            },
            previous () {
                if (this.active-- < 1) this.active = 1;
            },
            deleteLink (index) {
                this.orgLinkList.splice(index, 1);
            },
            handleItemChange (val) {
                if (val.length === 1) {
                    this.getAddress(parseInt(val[0]), "city");
                } else if (val.length === 2){
                    this.getAddress(val, "area");
                }
            },
            remoteMethod (query) {
                let that = this;
                this.loading = true;
                this.http("/org/selectList", {name: query}, function (res) {
                    if (res.status === 200) {
                        that.orgList = res.data.list;
                        that.loading = false;
                    } else {
                        that.loading = false;
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.loading = false;
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getAddress (code, index) {
                let that = this;
                let cityCode = '';
                if (index === "area") {
                    cityCode = code[1];
                } else {
                    cityCode = code;
                }
                this.addressLoading = true;
                this.http("/city/list", {cityCode: cityCode}, function (res) {
                    if (res.status === 200) {
                        if (index === "province") {
                            that.addressList = res.data.list;
                        } else if (index === "city") {
                            that.addressList.forEach(function (item) {
                                if (item.value === (code+'')) {
                                    item.children = res.data.list;
                                }
                            })
                        } else if (index === "area") {
                            for(let i = 0; i < that.addressList.length; i++) {
                                if (that.addressList[i].value === code[0]) {
                                    let data = that.addressList[i].children;
                                    for (let j = 0; j < data.length; j++) {
                                        if (data[j].value === code[1]) {
                                            data[j].children = res.data.list;
                                            break;
                                        }
                                    }
                                    break;
                                }
                            }
                        }
                        that.addressLoading = false;
                    } else {
                        that.addressLoading = false;
                        that.$alert('获取地址数据失败', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.addressLoading = false;
                    that.$alert('获取地址数据失败', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadSuccess (response, file) {
                if (response.status === 100) {
                    this.orgExtend.licensePicUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            formatType (row, column) {
                let type = row.type;
                let name = "";
                this.linkTypeList.forEach(function (item) {
                    if (item.value === type) {
                        name = item.name;
                    }
                })
                return name;
            },
            getOrgLink () {
                let that = this;
                this.$get("/dictionary/list/SEC_ORG_LINK", {}, function (res) {
                    if (res.status === 100) {
                        that.linkTypeList = res.returnValue;
                    } else {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getCharacter () {
                let that = this;
                this.$get("/dictionary/list/SEC_ORG_CHARACTER", {}, function (res) {
                    if (res.status === 100) {
                        that.natureList = res.returnValue;
                    } else {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            cancel () {
                this.contactForm = {
                    type: '',
                    name: '',
                    qq: '',
                    tel: '',
                    email: ''
                }
                this.dialogFormVisible = false;
            },
            saveLink () {
                let isValid = true;
                this.$refs.contactForm.validate(function (valid) {
                    if (!valid) {
                        isValid = false;
                    }
                })
                if (isValid) {
                    this.orgLinkList.push(this.contactForm);
                    this.cancel();
                } else {
                    this.$message.error('请完善信息');
                }
            },
            saveOrg () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                let org = {
                    pid: this.org.pid,
                    name: this.org.name,
                    city: this.org.city.length === 3 ? this.org.city[2] : "",
                    address: this.org.address,
                    zipCode: this.org.zipCode,
                    fax: this.org.fax,
                    email: this.org.email,
                    linkName: this.org.linkName,
                    linkTel: this.org.linkTel
                }
                if (this.orgExtend.establishTime !== "") {
                    let time = this.orgExtend.establishTime.getFullYear() + "-" + (this.orgExtend.establishTime.getMonth() + 1)
                            + "-" + this.orgExtend.establishTime.getDate() + " " + this.orgExtend.establishTime.getHours() + ":"
                            + this.orgExtend.establishTime.getMinutes() + ":" + this.orgExtend.establishTime.getSeconds();
                    this.orgExtend.establishTime = time;
                }
                this.http("/org/insert", {org: org, orgExtend: this.orgExtend, orgLinkList: this.orgLinkList}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        window.location.href = "/org/index";
                    } else {
                        loading.close();
                        that.$alert('添加失败', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('添加失败', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>